import React, { useState } from "react";
import { NavBar, Space, Image, Form, Input, Button } from "antd-mobile";
import {
  SearchOutline,
  TruckOutline,
  MailOutline,
  PhoneFill,
  RightOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import Style from "./MineView.module.scss";
type Props = {};

const MineView = (props: Props) => {
  // 导航栏右边
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline
          onClick={() => {
            // 点击跳转搜索
            // navigate();
            console.log("搜索页");
          }}
        />
        <TruckOutline
          onClick={() => {
            // 点击跳转购物车
            // navigate();
            console.log("购物车");
          }}
        />
      </Space>
    </div>
  );
  // 获取路由
  let navigate = useNavigate();
  // 图片地址
  let demoSrc =
    "https://yanxuan.nosdn.127.net/static-union/164793255107785e.png";
  // 点击手机显示的
  const [isShow, setIsShow] = useState(false);
  const [isShow1, setIsShow1] = useState(false);
  const [isPhoneShow, setIsPhoneShow] = useState(true);
  const [isEmailShow, setIsEmailShow] = useState(true);
  const onFinish = () => {
    console.log("1111");
  };
  return (
    <div className={Style.wrapper}>
      <div className="top">
        <NavBar
          right={right}
          onBack={() => {
            navigate("/home/recommend");
          }}
        >
          网易严选
        </NavBar>
      </div>
      <div style={{ width: "100%", height: "125px" }}>
        <Image
          className={Style.image}
          src={demoSrc}
          width={134}
          height={45}
          fit="fill"
        />
      </div>
      {/* 点击此按钮 */}
      {isPhoneShow && (
        <div
          onClick={() => {
            setIsShow(true);
            setIsPhoneShow(false);
            setIsEmailShow(false);
          }}
          className={Style.login}
        >
          <PhoneFill style={{ paddingRight: 5 }} />
          手机号快捷登录
        </div>
      )}
      {isShow && (
        <div className={Style.loginPhone}>
          <Form layout="vertical" onFinish={onFinish}>
            <Form.Item name="username">
              <Input placeholder="请输入手机号" clearable />
            </Form.Item>
            <Form.Item
              extra={
                <div
                  onClick={() => {
                    // 发送请求
                    console.log(1111);
                  }}
                  className={Style.extraPart}
                >
                  发送验证码
                </div>
              }
            >
              <Input placeholder="请输入验证码" clearable />
            </Form.Item>
            <Form.Item>
              <div className={Style.btnlogin}>登录</div>
            </Form.Item>
          </Form>
          <div
            onClick={() => {
              setIsShow(false);
              setIsPhoneShow(true);
              setIsEmailShow(true);
            }}
            className={Style.otherLogin}
          >
            其他登录方式
            <RightOutline />
          </div>
        </div>
      )}
      {isEmailShow && (
        <div
          onClick={() => {
            setIsShow1(true);
            setIsPhoneShow(false);
            setIsEmailShow(false);
          }}
          className={Style.email}
        >
          <MailOutline style={{ paddingRight: 5 }} />
          邮箱账号登录
        </div>
      )}
      {isShow1 && (
        <div className={Style.loginEmail}>
          <Form layout="vertical">
            <Form.Item name="username">
              <Input placeholder="邮箱账号" clearable />
            </Form.Item>
            <Form.Item>
              <Input placeholder="密码" clearable />
            </Form.Item>
            <div className={Style.btnlogin}>登录</div>
          </Form>
          <div
            onClick={() => {
              setIsShow1(false);
              setIsPhoneShow(true);
              setIsEmailShow(true);
            }}
            className={Style.otherLogin}
          >
            其他登录方式
            <RightOutline />
          </div>
        </div>
      )}
    </div>
  );
};

export default MineView;
